<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/axios.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <!-- 引入 elementUI 样式 -->
    <link rel="stylesheet" href="./js/element-ui-2.13.0/lib/theme-chalk/index.css">
    <!-- 引入elementUI 组件库 -->
    <script src="./js/element-ui-2.13.0/lib/index.js"></script>
</head>


<body>
    <div id="app">
        
        <el-table :data="tableData" border style="width: 100%" stripe stripe>
            <el-table-column prop="bid" label="图书编号" sortable width="180" @click="fun()">
            </el-table-column>
            <el-table-column prop="bname" label="图书名称" width="180">
            </el-table-column>
            <el-table-column prop="bprice" label="图书价格" sortable width="180">
            </el-table-column>
            <el-table-column prop="bauthor" label="图书作者">
            </el-table-column>
            <el-table-column prop="bdesc" label="图书简介">
            </el-table-column>
            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-button size="mini" icon="el-icon-circle-plus" @click="insertBook()">新增</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button size="mini" icon="el-icon-delete" type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 修改信息弹框 -->
        <el-dialog title="修改图书信息" :visible.sync="dialogFormVisible" :before-close="handleClose">
            <el-form :model="form">
                <el-form-item label="书名" :label-width="formLabelWidth">
                    <el-input v-model="form.bname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格" :label-width="formLabelWidth">
                    <el-input v-model="form.bprice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="作者" :label-width="formLabelWidth">
                    <el-input v-model="form.bauthor" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="简介" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.bdesc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateBook()">修改</el-button>
            </div>
        </el-dialog>
        <!-- 增加信息弹框 -->
        <el-dialog title="增加图书信息" :visible.sync="dialogInsertVisible" :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="书名" :label-width="formLabelWidth" prop="bname">
                    <el-input v-model="ruleForm.bname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格" :label-width="formLabelWidth" prop="bprice">
                    <el-input v-model="ruleForm.bprice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="作者" :label-width="formLabelWidth" prop="bauthor">
                    <el-input v-model="ruleForm.bauthor" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="简介" :label-width="formLabelWidth" prop="bdesc">
                    <el-input v-model="ruleForm.bdesc" type="textarea" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogInsertVisible = false">取 消</el-button>
                <el-button type="primary" @click="insert('ruleForm')">增加</el-button>
            </div>
        </el-dialog>

        <!-- 删除弹框 -->
        <el-dialog title="提示" :visible.sync="dialogDeleteVisible" width="30%" :before-close="handleClose">
            <span>确定要删除吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogDeleteVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteBook()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                dialogDeleteVisible: false,
                dialogFormVisible: false,
                dialogInsertVisible: false,

                rules: {
                    bname: [
                        { required: true, message: '请输入图书名称', trigger: 'blur' },
                        //{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    bprice: [
                        { required: true, message: '请输入图书价格', trigger: 'blur' }
                    ],
                    bauthor: [
                        { required: true, message: '请输入图书作者', trigger: 'blur' }
                    ],
                    bdesc: [
                        { required: true, message: '请填写图书简介', trigger: 'blur' }
                    ]
                },
                form: {
                    bid: '',
                    bname: '',
                    bprice: '',
                    bauthor: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    bdesc: ''
                },
                ruleForm: {
                    bname: "",
                    bprice: "",
                    bauthor: "",
                    bdesc: ""
                },
                deleteBookBid: '',
                formLabelWidth: '120px',
                tableData: []
            },
            created() {
                this.lookBooks();
            },
            methods: {
                //关闭弹框的提示
                handleClose(done) {
                    this.$confirm('确认关闭？')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => { });
                },
                //弹出删除弹框
                handleDelete(index, row) {
                    console.log(index, row);
                    this.dialogDeleteVisible = true;
                    this.deleteBookBid = row.bid;
                },
                //回传后台删除数据库信息
                deleteBook() {
                    axios({
                        method: 'get',
                        url: "http://localhost:8080/booksystem/book?method=deleteBookByBid&bid=" + this.deleteBookBid,

                    }).then(resp => {
                        console.log(resp.date);
                        window.location.reload();
                    })
                },
                //后台查询数据库信息
                lookBooks() {
                    axios({
                        method: 'get',
                        url: "http://localhost:8080/booksystem/book?method=lookAllBooks&num=" + this.num
                    }).then(resp => {//resp是返回的对象
                        console.log(resp);
                        console.log(resp.data);
                        console.log(resp.data.data);
                        this.tableData = resp.data.data;
                    })
                },
                //弹出修改信息的弹框
                handleEdit(index, row) {
                    this.dialogFormVisible = true;
                    this.form.bid = row.bid;
                    this.form.bname = row.bname;
                    this.form.bprice = row.bprice;
                    this.form.bauthor = row.bauthor;
                    this.form.bdesc = row.bdesc;
                    console.log(index);
                    console.log(row.bid);
                },
                //后台修改数据库信息
                updateBook() {
                    var params = new URLSearchParams();
                    params.append("method", "upDateBook");
                    params.append("bid", this.form.bid);
                    console.log(this.form.bid);
                    params.append("bname", this.form.bname);
                    params.append("bprice", this.form.bprice);
                    params.append("bauthor", this.form.bauthor);
                    params.append("bdesc", this.form.bdesc);
                    axios({
                        method: 'post',
                        url: "http://localhost:8080/booksystem/book",
                        data: params

                    }).then(resp => {
                        console.log(resp.data);
                        this.dialogFormVisible = false;
                        window.location.reload();
                    })
                },
                //弹出增加图书信息的弹框
                insertBook() {
                    this.dialogInsertVisible = true;
                },
                //后台增加数据库信息
                insert(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            var params = new URLSearchParams();
                            params.append("method", "addBook");
                            params.append("bname", this.ruleForm.bname);
                            params.append("bprice", this.ruleForm.bprice);
                            params.append("bauthor", this.ruleForm.bauthor);
                            params.append("bdesc", this.ruleForm.bdesc);
                            console.log(params);
                            axios({
                                method: 'post',
                                url: "http://localhost:8080/booksystem/book",
                                data: params
                            }).then(resp => {
                                console.log(resp);
                                console.log(resp.data);
                                window.location.reload();
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });

                }
            }
        })
    </script>
</body>

</html>